<div class="nv-dialog">
  <div class="d-flex align-items-center justify-content-between">
    <h4 mat-dialog-title class="mb-2">
      {{
        (type === 'add' ? 'service.ADD_RULE' : 'service.EDIT_RULE') | translate
      }}
    </h4>
    <div class="d-flex align-items-center justify-content-center mb-1">
      <button
        mat-icon-button
        aria-label="close"
      >
        <i class="eos-icons" (click)="onCancel()">close</i>
      </button>
    </div>
  </div>
  <hr class="fancy mb-2" />
  <div mat-dialog-content class="dialog-content p0 m0">
    <form [formGroup]="fileAccessRuleForm">
      <div class="d-flex justify-content-start align-items-start mt-2">
        <mat-form-field appearance="fill" class="flex-grow-1">
          <mat-label>{{ 'group.GROUP' | translate }}</mat-label>
          <mat-select matNativeControl required formControlName="group">
            <mat-option
              *ngFor="let groupOption of groupOptions"
              [value]="groupOption"
              >{{ groupOption }}</mat-option
            >
          </mat-select>
          <mat-error>Group is required!</mat-error>
        </mat-form-field>
      </div>
      <div class="row mx-0">
        <div class="col-8">
          <div class="d-flex justify-content-start align-items-center mt-2">
            <mat-form-field appearance="fill" class="flex-grow-1">
              <mat-label>{{ 'service.gridHeader.FILTER' | translate }}</mat-label>
              <input
                matInput
                name="filter"
                formControlName="filter"
                required
                [attr.maxlength]="'general.FILTER_MAX_LEN' | translate"
                [readonly]="type === 'edit'" />
              <mat-error
                *ngIf="fileAccessRuleForm.get('filter')?.hasError('required')"
                >Filter is required!</mat-error
              >
              <mat-error
                *ngIf="fileAccessRuleForm.get('filter')?.hasError('pattern')"
                >Format is not right!</mat-error
              >
            </mat-form-field>
          </div>
          <div class="d-flex justify-content-start align-items-center mt-2">
            <div style="margin: 10px 5px 0 0">
              <mat-checkbox
                name="recursive"
                formControlName="recursive"
                class="example-ripple-checkbox mr">
                {{ 'service.gridHeader.RECURSIVE' | translate }}
              </mat-checkbox>
            </div>
          </div>
          <div class="d-flex justify-content-start align-items-center mt-2">
            <div>
              <mat-label class="mr-2 text-bold">{{
                'service.ALLOW_ALERT' | translate
              }}</mat-label>
            </div>
            <div class="mt-3">
              <label class="radio-inline c-radio mr-2">
                <input
                  id="monitor-change"
                  type="radio"
                  name="behavior"
                  formControlName="behavior"
                  required
                  [value]="actionEnum.MONITOR" />
                {{ 'enum.MONITOR_CHANGE' | translate }}
              </label>
              <label class="radio-inline c-radio">
                <input
                  id="block-access"
                  type="radio"
                  name="behavior"
                  formControlName="behavior"
                  required
                  [value]="actionEnum.BLOCK" />
                {{ 'enum.BLOCK_ACCESS' | translate }}
              </label>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="text-info">
            <em class="eos-icons icon-18 mr-2">info</em>{{ 'general.SAMPLE'| translate }}
          </div>
          <div class="p-2 text-muted">
            <table>
              <tr class="sample-table-header">
                <th class="sample-table-border">{{ 'service.gridHeader.FILTER' | translate }}</th>
              </tr>
              <tr>
                <td class="sample-table-border">/dir/xxx</td>
              </tr>
              <tr>
                <td class="sample-table-border">/dir/xxx.*</td>
              </tr>
              <tr>
                <td class="sample-table-border">/dir/*.xxx</td>
              </tr>
              <tr>
                <td class="sample-table-border">/dir/*/abc/*</td>
              </tr>
            </table>
            <div class="text-bold">not support [] () regexp</div>
          </div>
        </div>
      </div>

      <div class="d-flex justify-content-start align-items-start mt-2">
        <mat-form-field appearance="fill" class="flex-grow-1">
          <mat-chip-list #chipList aria-label="Apps selection">
            <mat-chip
              *ngFor="let app of applicationChipsArray"
              [selectable]="true"
              [removable]="true"
              (removed)="removeAppFromChip(app)">
              {{ app }}
              <mat-icon matChipRemove *ngIf="true">cancel</mat-icon>
            </mat-chip>
            <input
              matInput
              placeholder="{{ 'service.gridHeader.APPLICATIONS' | translate }}"
              #AppsInput
              name="apps"
              formControlName="applications"
              [attr.maxlength]="'general.FILTER_MAX_LEN' | translate"
              [matChipInputFor]="chipList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              [matChipInputAddOnBlur]="true"
              (matChipInputTokenEnd)="addAppIntoChip($event)" />
          </mat-chip-list>
          <em matSuffix class="icon-puzzle input-icon"></em>
          <mat-error>Criterion is required!</mat-error>
        </mat-form-field>
      </div>
    </form>
  </div>
  <div mat-dialog-actions class="d-flex justify-content-end align-items-center">
    <button mat-stroked-button class="modal-cancel-button" (click)="onCancel()">
      {{ 'group.editGroup.CANCEL' | translate }}
    </button>
    <button
      mat-raised-button
      color="primary"
      (click)="addEditFileAccessRule()"
      [disabled]="fileAccessRuleForm.invalid">
      {{ 'policy.portlet.SUBMIT' | translate }}
    </button>
  </div>
</div>
